<template>
  <div v-if="isOpen" class="settings-modal-overlay" @click="handleOverlayClick">
    <div class="settings-modal" @click.stop>
      <div class="settings-header">
        <h2 class="settings-title">
          <span class="title-icon">⚙️</span>
          游戏设置
        </h2>
        <button @click="closeModal" class="close-btn">
          <span class="close-icon">✕</span>
        </button>
      </div>
      
      <div class="settings-content">
        <div class="settings-tabs">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            @click="activeTab = tab.id"
            class="tab-btn"
            :class="{ active: activeTab === tab.id }"
          >
            <span class="tab-icon">{{ tab.icon }}</span>
            {{ tab.name }}
          </button>
        </div>
        
        <div class="settings-panel">
          <!-- 游戏设置 -->
          <div v-if="activeTab === 'game'" class="settings-section">
            <div class="setting-group">
              <h3 class="group-title">游戏速度</h3>
              <div class="setting-item">
                <label class="setting-label">默认游戏速度</label>
                <select v-model="settings.defaultSpeed" class="setting-select">
                  <option value="0.5">0.5x</option>
                  <option value="1">1x</option>
                  <option value="2">2x</option>
                  <option value="4">4x</option>
                  <option value="8">8x</option>
                </select>
              </div>
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    v-model="settings.autoPause" 
                    type="checkbox" 
                    class="setting-checkbox"
                  >
                  重要事件时自动暂停
                </label>
              </div>
            </div>
            
            <div class="setting-group">
              <h3 class="group-title">自动保存</h3>
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    v-model="settings.autoSave" 
                    type="checkbox" 
                    class="setting-checkbox"
                  >
                  启用自动保存
                </label>
              </div>
              <div class="setting-item">
                <label class="setting-label">自动保存间隔 (分钟)</label>
                <input 
                  v-model.number="settings.autoSaveInterval" 
                  type="number" 
                  min="1" 
                  max="60"
                  class="setting-input"
                  :disabled="!settings.autoSave"
                >
              </div>
            </div>
          </div>
          
          <!-- 显示设置 -->
          <div v-if="activeTab === 'display'" class="settings-section">
            <div class="setting-group">
              <h3 class="group-title">界面主题</h3>
              <div class="setting-item">
                <label class="setting-label">主题</label>
                <select v-model="settings.theme" class="setting-select">
                  <option value="dark">深色主题</option>
                  <option value="light">浅色主题</option>
                  <option value="auto">跟随系统</option>
                </select>
              </div>
            </div>
            
            <div class="setting-group">
              <h3 class="group-title">界面缩放</h3>
              <div class="setting-item">
                <label class="setting-label">UI缩放 ({{ Math.round(settings.uiScale * 100) }}%)</label>
                <input 
                  v-model.number="settings.uiScale" 
                  type="range" 
                  min="0.8" 
                  max="1.5" 
                  step="0.1"
                  class="setting-range"
                >
              </div>
            </div>
            
            <div class="setting-group">
              <h3 class="group-title">动画效果</h3>
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    v-model="settings.animations" 
                    type="checkbox" 
                    class="setting-checkbox"
                  >
                  启用动画效果
                </label>
              </div>
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    v-model="settings.particleEffects" 
                    type="checkbox" 
                    class="setting-checkbox"
                  >
                  启用粒子效果
                </label>
              </div>
            </div>
          </div>
          
          <!-- 音频设置 -->
          <div v-if="activeTab === 'audio'" class="settings-section">
            <div class="setting-group">
              <h3 class="group-title">音量控制</h3>
              <div class="setting-item">
                <label class="setting-label">主音量 ({{ Math.round(settings.masterVolume * 100) }}%)</label>
                <input 
                  v-model.number="settings.masterVolume" 
                  type="range" 
                  min="0" 
                  max="1" 
                  step="0.1"
                  class="setting-range"
                >
              </div>
              <div class="setting-item">
                <label class="setting-label">音效音量 ({{ Math.round(settings.sfxVolume * 100) }}%)</label>
                <input 
                  v-model.number="settings.sfxVolume" 
                  type="range" 
                  min="0" 
                  max="1" 
                  step="0.1"
                  class="setting-range"
                >
              </div>
              <div class="setting-item">
                <label class="setting-label">背景音乐音量 ({{ Math.round(settings.musicVolume * 100) }}%)</label>
                <input 
                  v-model.number="settings.musicVolume" 
                  type="range" 
                  min="0" 
                  max="1" 
                  step="0.1"
                  class="setting-range"
                >
              </div>
            </div>
            
            <div class="setting-group">
              <h3 class="group-title">音频选项</h3>
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    v-model="settings.muteWhenInactive" 
                    type="checkbox" 
                    class="setting-checkbox"
                  >
                  窗口失焦时静音
                </label>
              </div>
            </div>
          </div>
          
          <!-- 通知设置 -->
          <div v-if="activeTab === 'notifications'" class="settings-section">
            <div class="setting-group">
              <h3 class="group-title">通知类型</h3>
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    v-model="settings.notifications.research" 
                    type="checkbox" 
                    class="setting-checkbox"
                  >
                  研究完成通知
                </label>
              </div>
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    v-model="settings.notifications.construction" 
                    type="checkbox" 
                    class="setting-checkbox"
                  >
                  建筑完成通知
                </label>
              </div>
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    v-model="settings.notifications.military" 
                    type="checkbox" 
                    class="setting-checkbox"
                  >
                  军事事件通知
                </label>
              </div>
              <div class="setting-item">
                <label class="setting-label">
                  <input 
                    v-model="settings.notifications.diplomacy" 
                    type="checkbox" 
                    class="setting-checkbox"
                  >
                  外交事件通知
                </label>
              </div>
            </div>
          </div>
          
          <!-- 键盘快捷键 -->
          <div v-if="activeTab === 'controls'" class="settings-section">
            <div class="setting-group">
              <h3 class="group-title">快捷键</h3>
              <div class="keybind-list">
                <div v-for="keybind in keybinds" :key="keybind.action" class="keybind-item">
                  <span class="keybind-action">{{ keybind.name }}</span>
                  <div class="keybind-key">
                    <kbd>{{ keybind.key }}</kbd>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="settings-footer">
        <button @click="resetToDefaults" class="reset-btn">
          <span class="btn-icon">🔄</span>
          重置为默认
        </button>
        <div class="footer-actions">
          <button @click="closeModal" class="cancel-btn">取消</button>
          <button @click="saveSettings" class="save-btn">
            <span class="btn-icon">💾</span>
            保存设置
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { useGameStore } from '@/stores/game'

interface NotificationSettings {
  research: boolean
  construction: boolean
  military: boolean
  diplomacy: boolean
}

interface GameSettings {
  defaultSpeed: number
  autoPause: boolean
  autoSave: boolean
  autoSaveInterval: number
  theme: 'dark' | 'light' | 'auto'
  uiScale: number
  animations: boolean
  particleEffects: boolean
  masterVolume: number
  sfxVolume: number
  musicVolume: number
  muteWhenInactive: boolean
  notifications: NotificationSettings
}

interface Keybind {
  action: string
  name: string
  key: string
}

// Props
interface Props {
  isOpen: boolean
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  close: []
}>()

// 响应式数据
const activeTab = ref('game')
const gameStore = useGameStore()

const tabs = [
  { id: 'game', name: '游戏', icon: '🎮' },
  { id: 'display', name: '显示', icon: '🖥️' },
  { id: 'audio', name: '音频', icon: '🔊' },
  { id: 'notifications', name: '通知', icon: '🔔' },
  { id: 'controls', name: '控制', icon: '⌨️' }
]

const settings = reactive<GameSettings>({
  defaultSpeed: 1,
  autoPause: true,
  autoSave: true,
  autoSaveInterval: 5,
  theme: 'dark',
  uiScale: 1,
  animations: true,
  particleEffects: true,
  masterVolume: 0.8,
  sfxVolume: 0.7,
  musicVolume: 0.5,
  muteWhenInactive: true,
  notifications: {
    research: true,
    construction: true,
    military: true,
    diplomacy: true
  }
})

const keybinds: Keybind[] = [
  { action: 'pause', name: '暂停/继续', key: 'Space' },
  { action: 'speed_up', name: '加速', key: '+' },
  { action: 'speed_down', name: '减速', key: '-' },
  { action: 'galaxy_view', name: '银河视图', key: 'G' },
  { action: 'colonies_view', name: '殖民地视图', key: 'C' },
  { action: 'research_view', name: '研究视图', key: 'R' },
  { action: 'military_view', name: '军事视图', key: 'M' },
  { action: 'trade_view', name: '贸易视图', key: 'T' },
  { action: 'settings', name: '设置', key: 'Esc' }
]

// 方法
function handleOverlayClick() {
  closeModal()
}

function closeModal() {
  emit('close')
}

function saveSettings() {
  // 保存设置到本地存储或游戏状态
  localStorage.setItem('gameSettings', JSON.stringify(settings))
  
  // 应用设置
  applySettings()
  
  closeModal()
}

function resetToDefaults() {
  if (confirm('确定要重置所有设置为默认值吗？')) {
    Object.assign(settings, {
      defaultSpeed: 1,
      autoPause: true,
      autoSave: true,
      autoSaveInterval: 5,
      theme: 'dark',
      uiScale: 1,
      animations: true,
      particleEffects: true,
      masterVolume: 0.8,
      sfxVolume: 0.7,
      musicVolume: 0.5,
      muteWhenInactive: true,
      notifications: {
        research: true,
        construction: true,
        military: true,
        diplomacy: true
      }
    })
  }
}

function applySettings() {
  // 应用主题
  document.documentElement.setAttribute('data-theme', settings.theme)
  
  // 应用UI缩放
  document.documentElement.style.setProperty('--ui-scale', settings.uiScale.toString())
  
  // 应用其他设置...
}

function loadSettings() {
  const saved = localStorage.getItem('gameSettings')
  if (saved) {
    try {
      const savedSettings = JSON.parse(saved)
      Object.assign(settings, savedSettings)
    } catch (error) {
      console.warn('Failed to load settings:', error)
    }
  }
}

// 监听设置变化
watch(() => settings.theme, (newTheme) => {
  document.documentElement.setAttribute('data-theme', newTheme)
})

watch(() => settings.uiScale, (newScale) => {
  document.documentElement.style.setProperty('--ui-scale', newScale.toString())
})

// 初始化
loadSettings()
applySettings()
</script>

<style scoped>
.settings-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.settings-modal {
  background: var(--bg-secondary);
  border-radius: 12px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-color);
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.settings-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 700;
}

.title-icon {
  font-size: 1.5rem;
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: var(--bg-hover);
  color: var(--error-color);
}

.close-icon {
  font-size: 1.2rem;
}

.settings-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.settings-tabs {
  display: flex;
  flex-direction: column;
  width: 200px;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-color);
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.tab-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.tab-btn.active {
  background: var(--primary-color);
  color: white;
}

.tab-icon {
  font-size: 1.1rem;
}

.settings-panel {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.setting-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.group-title {
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.setting-label {
  color: var(--text-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.setting-input,
.setting-select {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.5rem;
  color: var(--text-primary);
  min-width: 120px;
}

.setting-input:focus,
.setting-select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.setting-checkbox {
  accent-color: var(--primary-color);
}

.setting-range {
  min-width: 150px;
  accent-color: var(--primary-color);
}

.keybind-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.keybind-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--bg-primary);
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.keybind-action {
  color: var(--text-primary);
  font-weight: 500;
}

.keybind-key kbd {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-family: monospace;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
}

.reset-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.reset-btn:hover {
  background: var(--bg-hover);
  color: var(--warning-color);
  border-color: var(--warning-color);
}

.footer-actions {
  display: flex;
  gap: 0.75rem;
}

.cancel-btn {
  padding: 0.75rem 1.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn:hover {
  background: var(--bg-hover);
}

.save-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.save-btn:hover {
  background: var(--primary-hover);
}

.btn-icon {
  font-size: 1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .settings-modal {
    margin: 0.5rem;
    max-height: 95vh;
  }
  
  .settings-content {
    flex-direction: column;
  }
  
  .settings-tabs {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }
  
  .tab-btn {
    white-space: nowrap;
    min-width: 120px;
  }
  
  .settings-panel {
    padding: 1rem;
  }
  
  .setting-item {
    flex-direction: column;
    align-items: stretch;
  }
  
  .setting-label {
    margin-bottom: 0.5rem;
  }
}
</style>